<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul {
			list-style:none;
		}
		a{
			text-decoration: none;
		}
		.box {
			width: 180px;
			height: 101px;
			overflow: hidden;
			position: relative;
		}
		ul{
			width: 1080px;
			position: absolute;
		}
		ul li {
			width: 180px;
			float: left;
		}
		.btn {
			position: absolute;
			right: 5px;
			bottom: 5px;
		}
		.btn span{
			color: white;
			font-size: 12px;
			width: 15px;
			height: 15px;
			line-height: 15px;
			text-align: center;
			display: inline-block;
			background: black;
			opacity: 0.5;
			border-radius: 50%;
			margin-left: 2px;
			cursor: pointer;
		}
		.btn span.cur{
			opacity: 1;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul class="banner">
			<li><a href=""><img src="images/1.jpg" alt=""></a></li>
			<li><a href=""><img src="images/2.jpg" alt=""></a></li>
			<li><a href=""><img src="images/3.jpg" alt=""></a></li>
			<li><a href=""><img src="images/4.jpg" alt=""></a></li>
			<li><a href=""><img src="images/5.jpg" alt=""></a></li>
			<li><a href=""><img src="images/6.jpg" alt=""></a></li>
		</ul>
		<div class="btn"></div>
	</div>

	<script type="text/javascript">
		var ul = document.querySelector('ul.banner')
		var lis = document.querySelectorAll('ul.banner li')
		var btn = document.querySelector('.btn') // 控制点
		var l = lis.length; // 图片数量

		var i = 0 // 当前图片位置

		var T = setInterval(run, 1000)  // 轮播

		// 创建span标签
		for(var j = 1; j <= l; j++) {
			var span = document.createElement('span')
			span.innerHTML = j;
			btn.appendChild(span)
		}
		var spans = document.querySelectorAll('.btn span')
		
		spans.forEach(function(v, index){
			if(index == i) {
				v.className = 'cur'
			}
		})

		function run () {
			if(i == l) { // 当当前图片位置等于图片数量时，设置为0
				i = 0;
			}
			// 每次左移一张图片
			ul.style.left = -1 * 180 * i + "px";
			spans.forEach(function(v, index){
				v.classList.remove('cur')
				if(index == i) {
					v.className = 'cur'
				}
			})
			i++;
		}

		ul.onmouseover = function() {
			clearInterval(T)
		}

		ul.onmouseout = function() {
			T = setInterval(run, 1000) 
		}

		// 扩展： 鼠标点击n个小圆圈，第n张图片显示。
		
	</script>
</body>
</html>